<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions"
	xmlns:p="http://primefaces.org/ui"
	xmlns:cc="http://java.sun.com/jsf/composite"	>

<cc:interface>
	<cc:attribute name="handler"		type="com.hemerasolutions.v2trainer.component.interfaces.table.IntensityZoneTableCompInterface" required="true"/>
	<cc:attribute name="editable"		type="java.lang.Boolean"	default="true"	 required="false"/>	
</cc:interface>

<cc:implementation>
	<span id="#{cc.clientId}" class="ui-intensityTable" >
	
		<h:outputScript library="js" name="intensityTable.js"  />	
	
		<h:panelGrid columns="2" width="100%" style="width:100%;overflow:scroll" columnClasses="top-align,top-align" >
			<p:dataTable id="intensityTable" value="#{cc.attrs.handler.intensityTable.intensitys}" editMode="cell"  var="intensityZone"  editable="#{cc.attrs.editable}" styleClass="intensityTable" emptyMessage="#{msgs.NoResults}">
		        
		        <p:ajax event="cellEdit" listener="#{cc.attrs.handler.onCellChange}" update="intensityTable, :growl"  oncomplete="initIntensityTable();"  />
		        
				<p:column colspan="1"	styleClass="ui-table-button-row" rendered="#{cc.attrs.editable}"
					style="position:relative;max-height:15px !important;padding-top:0px !important;padding-bottom:0px !important"  >
					<f:facet name="header">
						<p:commandButton action="#{cc.attrs.handler.toAddItensityZone}"   update="intensityTable"  title="#{msgs.Add}" disabled="#{!cc.attrs.editable}"
							style="float:left;" 	icon="ui-icon-plus" styleClass="ui-table-button"  oncomplete="initIntensityTable();">
						</p:commandButton >
					</f:facet>
					<div class="ui-header">
						<p:commandButton action="#{cc.attrs.handler.upItensityZone}"   update="intensityTable"  title="#{msgs.Up}" disabled="#{!cc.attrs.editable}"
							style="float:left;top:0px;" 	icon="ui-icon-triangle-1-n" styleClass="ui-half-table-button"  oncomplete="initIntensityTable();">
							<f:setPropertyActionListener target="#{cc.attrs.handler.selIntensityZone}"  value="#{intensityZone}"/>
						</p:commandButton >
						<p:commandButton action="#{cc.attrs.handler.downItensityZone}"   update="intensityTable"  title="#{msgs.Down}" disabled="#{!cc.attrs.editable}"
							style="float:left;" 	icon="ui-icon-triangle-1-s" styleClass="ui-half-table-button"  oncomplete="initIntensityTable();">
							<f:setPropertyActionListener target="#{cc.attrs.handler.selIntensityZone}" value="#{intensityZone}"/>
						</p:commandButton >
					</div>
				</p:column>
				<p:column colspan="1" style="text-align:center;position:relative;max-height:15px !important;padding-top:0px !important;padding-bottom:0px !important"  >
					<f:facet name="header">	
						<h:outputText value="#{msgs.PhysicalCapacity}"  />
					</f:facet>	
					<p:cellEditor >
					    <f:facet name="output">
				            <p:selectOneMenu value="#{intensityZone.physicalCapacity}" converter="#{genericConverter}"  styleClass="ui-selector-on-table"   style="width:100px" disabled="true" >
				            	<f:selectItems value="#{cc.attrs.handler.modality.trainingType.physicalCapacitys}"  var="physicalCapacity"  itemDescription="#{msgs[physicalCapacity.description]}"
				            		itemLabel="#{msgs[physicalCapacity.name]}" itemValue="#{physicalCapacity}"  />
				            </p:selectOneMenu>
					    </f:facet>
					    <f:facet name="input">
				            <p:selectOneMenu value="#{intensityZone.physicalCapacity}" converter="#{genericConverter}" styleClass="ui-selector-on-table" immediate="true"  style="width:100px" >
				            	<f:selectItems value="#{cc.attrs.handler.modality.trainingType.physicalCapacitys}"  var="physicalCapacity" 	itemDescription="#{msgs[physicalCapacity.description]}"
				            		itemLabel="#{msgs[physicalCapacity.name]}" itemValue="#{physicalCapacity}" />
				            </p:selectOneMenu>
					    </f:facet>
					</p:cellEditor>		
					<p:commandButton process="@this" style="position:absolute;right:0px;top:0px;height:100%" actionListener="#{cc.attrs.handler.toExecutionTimeDialog}"
					 		 title="#{msgs.ExecutionTimes}" icon="ui-icon-clock" styleClass="ui-table-button2" update=":growl">
							<f:attribute name="intensityZone" 	value="#{intensityZone}" />
							<f:attribute name="component" 		value="#{cc.clientId}" />
							<f:attribute name="dialog" 			value="executionTimeDialog" />
							<f:attribute name="atcomplete"		value="wexecutionTimeDialog_#{cc.id}.show();"/>
					</p:commandButton>	
				</p:column>
				<p:column colspan="1" style="max-height:15px !important;padding-top:0px !important;padding-bottom:0px !important"   >
					<f:facet name="header">	
						<h:outputText value="#{msgs.Name}" />
					</f:facet>	
					<p:cellEditor>
					    <f:facet name="output">
					    	<h:outputText  value="#{intensityZone.name}" />
					    </f:facet>
					    <f:facet name="input">
							<p:inputText  value="#{intensityZone.name}"/>					       
					    </f:facet>
					</p:cellEditor>		
				</p:column>
				<p:column colspan="1" style="max-height:15px !important;padding-top:0px !important;padding-bottom:0px !important"   >
					<f:facet name="header">	
						<h:outputText value="#{msgs.Alias}"  />
		                <h:outputText style="float:right;display:block;height:10px;width:10px;border:0 none;padding:0px" styleClass="droppoint dropright" />
					</f:facet>	
					<p:cellEditor>
					    <f:facet name="output">
					    	<h:outputText  value="#{intensityZone.alias}" />
					    </f:facet>
					    <f:facet name="input">
							<p:inputText  value="#{intensityZone.alias}" />					       
					    </f:facet>
					</p:cellEditor>		
				</p:column>
	 			<p:columns value="#{intensityTable.intensityUnits}" var="intensityUnit" columnIndexVar="columnIndexVar" style="vertical-align:center;text-align:center;position:relative;max-height:15px !important;padding-top:0px !important;padding-bottom:0px !important;"    >
		            <f:facet name="header">
		                <h:outputText style="float:left;display:block;height:10px;width:10px;border:0 none;padding:0px" styleClass="droppoint dropleft" />                           
		                <h:outputText style="float:right;display:block;height:10px;width:10px;border:0 none;padding:0px" styleClass="droppoint dropright" />
		                <p:outputLabel value="#{msgs[intensityUnit.name]}" title="#{msgs[intensityUnit.description]}"/>
		                 
		            	<h:outputText value="#{intensityExecution.execution.name}" 	style="display:none;width:0px" styleClass="ui-columm-property-execution"   />
		            	<h:outputText value="#{intensityTable.level}" 				style="display:none;width:0px" styleClass="ui-columm-property-level"   />
		            	<h:outputText value="#{intensityUnit.name}" 				style="display:none;width:0px" styleClass="ui-columm-property-unit"   />
		            </f:facet>
					<p:cellEditor>
					    <f:facet name="output">
							<div style="display: block;">
								<h:outputText  value="#{intensityZone.intensitys[columnIndexVar].lowValue}"	  style="vertical-align:top"
									rendered="#{!intensityZone.intensitys[columnIndexVar].volumeFactor.timeBased}" >
									<f:converter converterId="dynamicNumberConverter" />
									<f:attribute name="pattern"	value="#{intensityZone.intensitys[columnIndexVar].volumeFactor.pattern}" 	 	/>
								</h:outputText>
								<h:outputText  value="#{intensityZone.intensitys[columnIndexVar].lowDateValue}"	  style="vertical-align:top"
									rendered="#{intensityZone.intensitys[columnIndexVar].volumeFactor.timeBased}" >
									<f:convertDateTime pattern="HH:mm:ss" timeZone="GMT0"/>
								</h:outputText>
								<h:outputText value=" - " style="vertical-align:top" />
								<h:outputText  value="#{intensityZone.intensitys[columnIndexVar].highValue}" style="vertical-align:top" 
									rendered="#{!intensityZone.intensitys[columnIndexVar].volumeFactor.timeBased}" >
									<f:converter converterId="dynamicNumberConverter" />
									<f:attribute name="pattern"	value="#{intensityZone.intensitys[columnIndexVar].volumeFactor.pattern}" 	 	/>
								</h:outputText>										
								<h:outputText  value="#{intensityZone.intensitys[columnIndexVar].highDateValue}" style="vertical-align:top" 
									rendered="#{intensityZone.intensitys[columnIndexVar].volumeFactor.timeBased}" >
									<f:convertDateTime pattern="HH:mm:ss" timeZone="GMT0"/>
								</h:outputText>										
	
	
								<h:outputText  value=" #{intensityZone.intensitys[columnIndexVar].volumeFactor.unit}" />	
							</div>
					    </f:facet> 
					    <f:facet name="input">
				    		<p:outputPanel id="intensityValues"  layout="block" style="text-align: left;display: block;" >
								<p:inputText value="#{intensityZone.intensitys[columnIndexVar].lowValue}"	style="vertical-align:top;width:30px"
									 rendered="#{!intensityZone.intensitys[columnIndexVar].volumeFactor.timeBased}" >
									<f:converter converterId="dynamicNumberConverter"  />
									<f:attribute name="pattern"	value="#{intensityZone.intensitys[columnIndexVar].volumeFactor.pattern}" 	 	/>
								</p:inputText>
								<p:inputText value="#{intensityZone.intensitys[columnIndexVar].highValue}" 	 	style="vertical-align:top;width:30px"
									rendered="#{!intensityZone.intensitys[columnIndexVar].volumeFactor.timeBased}" >
									<f:converter converterId="dynamicNumberConverter" />
									<f:attribute name="pattern"	value="#{intensityZone.intensitys[columnIndexVar].volumeFactor.pattern}" 	 	/>
								</p:inputText>
	
								<p:calendar value="#{intensityZone.intensitys[columnIndexVar].lowDateValue}"	timeZone="GMT0" 	pattern="HH:mm:ss" locale="pt" 
									 timeOnly="true" 	rendered="#{intensityZone.intensitys[columnIndexVar].volumeFactor.timeBased}"	style="vertical-align:top" styleClass="ui-table-calendar" />
	
								<p:calendar value="#{intensityZone.intensitys[columnIndexVar].highDateValue}"	timeZone="GMT0" 	pattern="HH:mm:ss"	locale="pt"
									 timeOnly="true" 	rendered="#{intensityZone.intensitys[columnIndexVar].volumeFactor.timeBased}"	style="vertical-align:top" styleClass="ui-table-calendar" />
	
								<p:selectOneMenu value="#{intensityZone.intensitys[columnIndexVar].volumeFactor}" immediate="true"  converter="#{volumeFactorConverter}"  
									rendered="#{fn:length(intensityZone.intensitys[columnIndexVar].intensityUnit.volumeType.volumeFactors) > 1}"	style="min-width:80px">
									<f:selectItems value="#{intensityZone.intensitys[columnIndexVar].intensityUnit.volumeType.volumeFactors}"  var="volumeFactor" 
										itemLabel="#{msgs[volumeFactor.name]} " itemValue="#{volumeFactor}" />
									<p:ajax update="intensityValues" process="intensityValues"  />	
								</p:selectOneMenu>	
							</p:outputPanel>																	
					    </f:facet>		
					</p:cellEditor>	
		        </p:columns>		
				<p:column colspan="1"  style="max-height:15px !important;padding-top:0px !important;padding-bottom:0px !important;white-space: nowrap;"  >
					<f:facet name="header">
						<p:outputLabel value="#{msgs.IU_RPE}" title="#{msgs.IU_RPE_DESC}" />
						<p:outputLabel styleClass="ui-icon ui-icon-triangle-1-s" style="vertical-align:top;display: inline-block !important;"  />
					</f:facet>
					<p:cellEditor>
					    <f:facet name="output">
							<h:outputText  value="#{msgs[intensityZone.lowRpe.name]}"/>
					    </f:facet> 
					    <f:facet name="input">
				            <p:selectOneMenu value="#{intensityZone.lowRpe}" converter="#{genericConverter}"  styleClass="ui-selector-on-table"  
				            	style="white-space: nowrap;width:50px" panelStyle="width:50px;" >
				            	<f:selectItems value="#{cc.attrs.handler.fullRpes}"  var="rpe"  itemValue="#{rpe}"
				            		itemDescription="#{msgs[rpe.description]}"	itemLabel="#{rpe.value}"  />
				            </p:selectOneMenu>  
					    </f:facet>			
					</p:cellEditor>		
				</p:column>
				<p:column colspan="1"  style="max-height:15px !important;padding-top:0px !important;padding-bottom:0px !important;white-space: nowrap;"  >
					<f:facet name="header">
						<p:outputLabel value="#{msgs.IU_RPE}" title="#{msgs.IU_RPE_DESC}" />
						<p:outputLabel styleClass="ui-icon ui-icon-triangle-1-n" style="vertical-align:top;display: inline-block !important;"  />
					</f:facet>
					<p:cellEditor>
					    <f:facet name="output">
							<h:outputText  value="#{msgs[intensityZone.highRpe.name]}"/>
					    </f:facet> 
					    <f:facet name="input">
				            <p:selectOneMenu value="#{intensityZone.highRpe}" converter="#{genericConverter}"  styleClass="ui-selector-on-table"  
				            	style="white-space: nowrap;width:50px" panelStyle="width:50px;">
				            	<f:selectItems value="#{cc.attrs.handler.fullRpes}"  var="rpe"  itemValue="#{rpe}"
				            		itemDescription="#{msgs[rpe.description]}"	itemLabel="#{rpe.value}"  />
				            </p:selectOneMenu> 
					    </f:facet>			
					</p:cellEditor>		
				</p:column>
				<p:column colspan="1" headerText="#{msgs.Color}" width="20" style="max-height:15px !important;padding-top:0px !important;padding-bottom:0px !important" >
					<p:cellEditor>
					    <f:facet name="output">
					    	<p:inputText style="padding:0px;margin:0px;border:none"  value="#{intensityZone.color}" type="color" readonly="true" disabled="#{!cc.attrs.editable}"  />	
					    </f:facet>
					    <f:facet name="input">
							<p:inputText style="padding:0px;margin:0px;border:none"   value="#{intensityZone.color}" type="color"   />	
					    </f:facet>
					</p:cellEditor>		
				</p:column>
				<p:column colspan="1" styleClass="ui-table-button-row" rendered="#{cc.attrs.editable}"
					style="max-height:15px !important;padding-top:0px !important;padding-bottom:0px !important"  >
					<p:commandButton action="#{cc.attrs.handler.deleteItensityZone}"  update="intensityTable"  title="#{msgs.Delete}" disabled="#{!cc.attrs.editable}"
						style="height:100%;" 	icon="ui-icon-trash" styleClass="ui-table-button" oncomplete="initIntensityTable();" >
							<f:setPropertyActionListener target="#{cc.attrs.handler.selIntensityZone}" value="#{intensityZone}"/>
					</p:commandButton >
				</p:column>		
			</p:dataTable>
	
		    <p:tree id="measuresTree" value="#{cc.attrs.handler.rootNode}" var="column" style="float:right" rendered="#{cc.attrs.editable}">
		        <p:treeNode >
		            <h:outputText value="#{column}" />
		        </p:treeNode>
		        <p:treeNode type="column" icon="ui-icon-grip-dotted-vertical" >
		            <h:outputText value="#{column.header}" />
		            <h:outputText value="#{column.property}" 					style="display:none;width:0px" styleClass="ui-columm-property-unit"   />
	            	<h:outputText value="#{intensityExecution.execution.name}" 	style="display:none;width:0px" styleClass="ui-columm-property-execution"   />
	            	<h:outputText value="#{intensityTable.level}" 				style="display:none;width:0px" styleClass="ui-columm-property-level"   />
		        </p:treeNode>
		    </p:tree>
		    
		    <p:remoteCommand name="treeToTable_#{cc.clientId.replaceAll('-|:','_')}" rendered="#{cc.attrs.editable}"
		    	actionListener="#{cc.attrs.handler.treeToTable}" update="intensityTable, measuresTree" oncomplete="initIntensityTable();"/>

		    <p:remoteCommand name="tableToTree_#{cc.clientId.replaceAll('-|:','_')}" rendered="#{cc.attrs.editable}"
		    	actionListener="#{cc.attrs.handler.tableToTree}" update="intensityTable, measuresTree" oncomplete="initIntensityTable();"/>
		</h:panelGrid>					
	</span>

		<p:dialog id="executionTimeDialog" header="#{msgs.ExecutionTimes}"  appendTo="@(body)" widgetVar="wexecutionTimeDialog_#{cc.id}" modal="true" dynamic="true"> 
			<h:form id="formExecutionTime" prependId="false" >
				<p:outputPanel layout="block" rendered="#{cc.attrs.handler.modality.trainingType.intensityVolume.name == 'V_VELOCITY'}" >
					<h:panelGrid columns="2" cellpadding="2">
						<h:outputLabel value="#{msgs.ArbitraryMultiplier}: "  					/>
						<p:inputText value="#{cc.attrs.handler.selIntensityZone.uaFactor}" 	disabled="#{!cc.attrs.editable}"		/>

						<h:outputLabel value="#{msgs.VolumeUnit}: "  								disabled="#{!cc.attrs.editable}"	/>
						<p:selectOneMenu id="speedVolumeFactor" value="#{cc.attrs.handler.selIntensityZone.speedVolumeFactor}" immediate="true"  converter="#{volumeFactorConverter}"  
							style="min-width:100px">
							<f:selectItems value="#{cc.attrs.handler.modality.trainingType.intensityVolume.volumeFactors}"  var="volumeFactor" 
								itemLabel="#{msgs[volumeFactor.name]} " itemValue="#{volumeFactor}" />
							<p:ajax update="formExecutionTime" process="speedVolumeFactor"  />	
						</p:selectOneMenu>	

						<h:outputLabel value="#{msgs.AverageSpeed}: "  								disabled="#{!cc.attrs.editable}"	/>
						<p:inputText id="averageSpeed" value="#{cc.attrs.handler.selIntensityZone.averageSpeed}"  disabled="#{!cc.attrs.editable}" style="vertical-align:top;width:30px" 
							rendered="#{not cc.attrs.handler.selIntensityZone.speedVolumeFactor.timeBased}">
							<f:ajax event="blur" />
							<f:converter converterId="dynamicNumberConverter" />
							<f:attribute name="pattern"	value="#{cc.attrs.handler.selIntensityZone.speedVolumeFactor.pattern}" 	 	/>
						</p:inputText>
						
						<p:calendar value="#{cc.attrs.handler.selIntensityZone.dateAverageSpeed}"  timeZone="GMT0" 	pattern="HH:mm:ss" locale="pt" 
							 timeOnly="true" style="vertical-align:top" styleClass="ui-table-calendar" disabled="#{!cc.attrs.editable}"
							 rendered="#{cc.attrs.handler.selIntensityZone.speedVolumeFactor.timeBased}" >
							<f:ajax event="dateSelect"/>
							<f:ajax event="blur" />
						</p:calendar>	 
						
					</h:panelGrid>
				</p:outputPanel>

				<p:outputPanel layout="block" rendered="#{cc.attrs.handler.modality.trainingType.intensityVolume.name == 'V_TIME'}" >
					<h:panelGrid columns="2" cellpadding="2">
						<h:outputLabel value="#{msgs.ArbitraryMultiplier}: "  					/>
						<p:inputText value="#{cc.attrs.handler.selIntensityZone.uaFactor}" 	disabled="#{!cc.attrs.editable}"		/>


						<h:outputLabel value="#{msgs.ConcentricTime}: "  	disabled="#{!cc.attrs.editable}"	/>
						<p:calendar value="#{cc.attrs.handler.selIntensityZone.concentricTime}" timeZone="GMT0"  pattern="HH:mm:ss" locale="pt" 
							 timeOnly="true" style="vertical-align:top" styleClass="ui-table-calendar" disabled="#{!cc.attrs.editable}" />


						<h:outputLabel value="#{msgs.EccentricTime}:" 		disabled="#{!cc.attrs.editable}"	/>
						<p:calendar value="#{cc.attrs.handler.selIntensityZone.eccentricTime}"  timeZone="GMT0" 	pattern="HH:mm:ss" locale="pt" 
							 timeOnly="true" style="vertical-align:top" styleClass="ui-table-calendar" disabled="#{!cc.attrs.editable}" />
					</h:panelGrid>
				</p:outputPanel>

				<p:commandButton value="#{msgs.Save}"  update=":growl" process="@form" oncomplete="wexecutionTimeDialog_#{cc.id}.hide();" 
					disabled="#{!cc.attrs.editable}"	rendered="#{cc.attrs.editable}"/>
				<p:commandButton type="button" value="#{msgs.Close}" onclick="wexecutionTimeDialog_#{cc.id}.hide();"/>
		</h:form>
	</p:dialog>
</cc:implementation>


</html>